<template>
  <div style="height: 100%;position: relative;">
    <div class="title">质量问题超期项目TOP10</div>
    <el-row style="margin-top: 10px;">
      <el-col :span="8" :offset="15">
        <el-date-picker v-model="dateRange" size="mini" type="daterange" range-separator="至" start-placeholder="开始日期"
          end-placeholder="结束日期" value-format="yyyy-MM-dd" @change="getData">
        </el-date-picker>
      </el-col>
    </el-row>
    <div id="main" style="width: 100%;height:calc(100% - 80px)"></div>
    <img src="@/assets/images/noData.png" class="nodataImg" v-if="!list.length" />
  </div>
</template>
<script>
import * as echarts from "echarts";
import { getOverdueProjects } from "./api"
function getRandomColor() {
  var r = Math.floor(Math.random() * 256);
  var g = Math.floor(Math.random() * 256);
  var b = Math.floor(Math.random() * 256);
  return "rgb(" + r + "," + g + "," + b + ")";
}
export default {
  data() {
    return {
      dateRange: [],
      chart: null,
      list: []
    };
  },
  methods: {
    initChart() {
      const chartDom = document.getElementById("main");
      this.chart = echarts.init(chartDom);
    },
    async getData() {
      const res = await getOverdueProjects({
        startDate: this.dateRange && this.dateRange.length ? this.dateRange[0] : null,
        endDate: this.dateRange && this.dateRange.length ? this.dateRange[1] : null,
      })
      this.list = res.data;
      this.setOption();
    },
    setOption() {
      const option = {
        // color: '#c23531',
        // color: getRandomColor(),
        tooltip: {
          trigger: "axis",
        },
        grid: {
          top: "5%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          // data: ["项目一", "项目一", "项目一", "项目一", "项目一", "项目一", "项目一", "项目一", "项目一", "项目一"],
          data: this.list.map(item => item.project),
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            // data: [150, 140, 130, 120, 110, 100, 90, 80, 70, 60],
            data: this.list.map(item => ({
              value: item.overduecount,
              itemStyle: {
                color: getRandomColor()
              }
            })),
            type: "bar",
          },
        ],
      };
      this.chart.setOption(option);
    },
  },

  //钩子函数
  mounted() {
    this.initChart();
    this.getData();
  },
};
</script>
<style scoped  lang="scss">
.title {
  padding: 5px;
}

.nodataImg {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 30%;
  left: 40%;
}

::v-deep .el-input__inner {
  background-color: transparent !important;
}

::v-deep .el-date-editor--daterange.el-input__inner {
  width: auto;
  border-color: rgba(117, 122, 130);
  color: rgb(117, 122, 130);
}

/**修改边框和字体颜色 */
::v-deep .el-select {
  position: relative;
  width: 160px;

  .el-input {
    input {
      border-color: rgba(117, 122, 130);
      color: rgb(117, 122, 130);
    }
  }
}

::v-deep .el-range-input {
  background-color: transparent !important;
}
</style>
